<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义长度为0的数组
        // let  array = new Array();
        // array[0] = 12;
        // array[1] = "abc";
        // array[6] = 90;
        //
        // console.log(array);
        // console.log(array[2]);
        //
        // array.length = 3;
        // console.log(array);

        //创建数组，并给数组元素赋初值，数组长度为元素个数
        // let array = [3,4,5];
        // //向数组尾部追加元素
        // array.push(8);
        // console.log(array);


        // let obj = new Object();
        // obj.name = "tom";
        // obj.age = 8;
        //
        // alert(obj.name+"    "+obj.age);
        // //删除对象的属性
        // delete obj.age;
        // alert(obj.name+"    "+obj.age);

        //创建json对象
        //相当于var obj = new Object();创建没有任何属性的对象
        // var obj = {};
        //
        // //创建json对象，属性名和属性值以冒号隔开，属性与属性之间以逗号隔开
        // var man = {name:"张三","age":20};
        // console.log(man.name+"    "+man.age);

        //json数组
        // let manArray = [{name:"张三","age":20,"sex":"男"},
        //                 {name:"李四",age:21,"sex":"女"},
        //                 {name:"王五",age:25,"sex":"男"}];
        //
        // for(let i=0;i<manArray.length;i++){
        //     let obj = manArray[i];
        //     console.log(obj.name+"   "+obj.age+"   "+obj.sex);
        // }
        //创建商品的json数组，每个元素都有商品名、单价、产地三个属性
        let productArray = [
            {"name":"汉堡",price:5,address:"成都"},
            {name:"面包",price:3,address:"北京"},
            {name:"可乐",price:4,address:"上海"}
        ];

        window.onload = function () {
            var bodyObj = document.getElementById("data");
            var str = "";
            for(var i=0;i<productArray.length;i++){
                var obj = productArray[i];
                str += "<tr><td>"+obj.name+"</td><td>"+obj.price+"</td><td>"+obj.address+"</td></tr>";
            }

            bodyObj.innerHTML =  str;
        }
    </script>
</head>
<body>
    <table border="1" width="50%">
        <thead>
            <tr><th>商品名</th><th>单价</th><th>产地</th></tr>
        </thead>

        <tbody id="data"></tbody>
    </table>
</body>
</html>